<template>
  <div class="detail-container">
    <div class="title">TODO DETAILS</div>
    <t-form
      ref="form"
      labelAlign="left"
      :rules="rules"
      :data="detailInfos"
      @submit="onSubmit"
      @reset="onReset"
    >
      <t-form-item label="任务标题" name="title">
        <t-input
          v-model="detailInfos.title"
          placeholder="请输入任务标题"
          clearable
          @enter="onEnter"
        ></t-input>
      </t-form-item>
      <t-form-item label="任务描述" name="description">
        <t-textarea
          v-model="detailInfos.description"
          placeholder="请输入任务描述"
          clearable
          :autosize="{ minRows: 5, maxRows: 8 }"
          maxlength="500"
          @enter="onEnter"
        ></t-textarea>
      </t-form-item>
      <t-form-item label="创建时间">
        <t-input
          :value="formatTimestamp(detailInfos.createdAt)"
          placeholder="无"
          readonly
          disabled
        ></t-input>
      </t-form-item>
      <t-form-item label="更新时间">
        <t-input
          :value="formatTimestamp(detailInfos.updatedAt)"
          placeholder="无"
          readonly
          disabled
        ></t-input>
      </t-form-item>
      <t-form-item>
        <t-space size="small">
          <t-button theme="primary" type="submit">提交</t-button>
          <t-button theme="default" variant="base" type="reset">重置</t-button>
        </t-space>
      </t-form-item>
    </t-form>
  </div>
</template>

<script lang="ts" setup>
import { ITask } from "@/models/task";
import { useTaskStore } from "@/store";
import { MessagePlugin } from "tdesign-vue-next";
import { computed } from "vue";

import { formatTimestamp } from "@/utils/tools";

const taskStore = useTaskStore();
const detailInfos = computed<ITask>(() => taskStore.currentTask);

// 校验规则
const rules = {
  title: [{ required: true, message: "任务名称必填", type: "error" }],
};

// 提交表单
const onSubmit = ({ validateResult, firstError }) => {
  if (validateResult === true) {
    taskStore.handleUpdateTask(detailInfos.value);
    MessagePlugin.success("提交成功");
    const targetTask = taskStore.list.find(
      (ele) => ele.id === detailInfos.value.id
    );
    taskStore.handleSetCurrentTaskDetails(targetTask);
  } else {
    console.log("Validate Errors: ", firstError, validateResult);
    MessagePlugin.warning(firstError);
  }
};

// 重置表单
const onReset = () => {
  const tempTask: ITask = Object.assign({}, detailInfos.value, {
    title: "",
    description: "",
  });
  taskStore.handleResetCurrentTask(tempTask);
  MessagePlugin.success("重置成功");
};

// 禁用 Input 组件，按下 Enter 键时，触发 submit 事件
const onEnter = (_, { e }) => {
  e.preventDefault();
};
</script>

<style lang="less" scoped>
.detail-container {
  width: 100%;
  height: 100%;
  padding: 24px;
  box-sizing: border-box;
  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: var(--td-shadow-3);
    font-size: 52px;
    font-weight: bold;
    background: var(--td-brand-color-4);
    margin-bottom: 24px;
  }
}
</style>